<template>
  <div class='tabbar'>
    <mt-tabbar v-model="tabbar_checked">
      <mt-tab-item :id="item.title" v-for="(item,index) in tabbarData" :key="index" @click.native="goToPath(item)">
        <i slot="icon" :class="'iconfont ' + item.icon"></i>
        <span class="tab-item-text">{{ item.title }}</span>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  props: {
    checked: {
      type: String,
      default: 'home'
    }
  },
  data () {
    return {
      tabbar_checked: '首页',
      tabbarData: [
        {
          title: '首页',
          icon: 'icon-changyonglogo40',
          path: '/home'
        },
        {
          title: '发现',
          icon: 'icon-ziyuan',
          path: '/discover'
        },
        {
          title: '订单',
          icon: 'icon-dingdan',
          path: '/order'
        },
        {
          title: '我的',
          icon: 'icon-daohanglan-05',
          path: '/profile'
        }
      ]
    }
  },
  methods: {
    goToPath (obj) {
      if (obj.title !== this.checked) {
        this.$router.push(obj.path)
      }
    }
  },
  created () {
    this.tabbar_checked = this.checked
  }
}

</script>
<style lang='less' scoped>
// 图标大小
.iconfont {
  font-size: 1.3rem;
}
// item 的字体
.tab-item-text {
  font-size: 0.6rem;
  color: #999;
}
.is-selected .tab-item-text {
  color: #26a2ff;
}
//  给tabbar加个上阴影
.mint-tabbar {
  box-shadow: 0 0 10px 0 hsla(0, 6%, 58%, 0.6);
}
</style>
